<template>
    <li>
        <label>
          <input type="checkbox"  :checked="todo.done" @change="handleCheck(todo.id)"/>
          <span v-show="!todo.isEdit">{{todo.title}}</span>
		  <input v-show="todo.isEdit" type="text" 
		  :value="todo.title" 
		  @blur="handleBlur(todo,$event)"
		  ref="inputTitle">
        </label>
        <button class="btn btn-danger" @click="handleDelete(todo.id)">删除</button>
        <button class="btn btn-edit" @click="handleEdit(todo)" v-show="!todo.isEdit">编辑</button>
    </li>
</template>

<script>
	import pubsub from 'pubsub-js'
    export default {
        name:'my-item',
		//声明接受插值语法
		props:['todo'],
		methods:{
			handleCheck(id){
				//通知app修改对应对象的done值
				this.$bus.$emit('checkTodo',id)
			},
			handleDelete(id){
				if(confirm('确定删除吗？')){
					//通知app删除
					//this.$bus.$emit('deleteTodo',id)
					pubsub.publish('deleteTodo',id)
				}
			},
			handleEdit(todo){
				if(todo.hasOwnProperty.call('isEdit')){
					todo.isEdit=true
				}else{
					this.$set(todo,'isEdit',true)
				}
				//DOM更新完之后，再执行代码
				this.$nextTick(function(){
					this.$refs.inputTitle.focus()
				})				
			},
			//失去焦点执行修改
			handleBlur(todo,e){
				todo.isEdit=false
				if(!e.target.value.trim()) return alert('输入不能为空')
				this.$bus.$emit('updateTodo',todo.id,e.target.value)
			}
		}
    }
</script>

<style scoped>
    /*main*/
	.todo-main {
		margin-left: 0px;
		border: 1px solid #ddd;
		border-radius: 2px;
		padding: 0px;
	}
	
	.todo-empty {
		height: 40px;
		line-height: 40px;
		border: 1px solid #ddd;
		border-radius: 2px;
		padding-left: 5px;
		margin-top: 10px;
	}

	/*item*/
	li {
		list-style: none;
		height: 36px;
		line-height: 36px;
		padding: 0 5px;
		border-bottom: 1px solid #ddd;
	}

	li label {
		float: left;
		cursor: pointer;
	}

	li label li input {
		vertical-align: middle;
		margin-right: 6px;
		position: relative;
		top: -1px;
	}

	li button {
		float: right;
		display: none;
		margin-top: 3px;
	}

	li:before {
		content: initial;
	}

	li:last-child {
		border-bottom: none;
	}

	li:hover{
		background-color: #ddd;
	}
	
	li:hover button{
		display: block;
	}
</style>